<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>Document</title>
        <link href="https://cdn.bootcdn.net/ajax/libs/tailwindcss/2.0.4/tailwind.min.css" rel="stylesheet" />
        <style>
            body {
                user-select: none;
            }

            .card {
                margin-bottom: 20px;
                padding: 10px;
                border-radius: 4px;
                border: 1px solid #ccc;
            }

            button {
                background-color: #eee;
                padding: 6px 10px;
                margin-right: 10px;
                margin-bottom: 10px;
                outline: none;
            }

            button:focus {
                outline: none;
            }
        </style>
    </head>

    <body>
        <div class="bg-indigo-600">
            <div class="max-w-7xl mx-auto py-3 px-3">
                <div class="flex items-center justify-between flex-wrap">
                    <div class="w-0 flex-1 flex items-center">
                        <span class="flex p-2 rounded-lg bg-indigo-800">
                            <svg class="h-6 w-6 text-white" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true">
                                <path
                                    stroke-linecap="round"
                                    stroke-linejoin="round"
                                    stroke-width="2"
                                    d="M11 5.882V19.24a1.76 1.76 0 01-3.417.592l-2.147-6.15M18 13a3 3 0 100-6M5.436 13.683A4.001 4.001 0 017 6h1.832c4.1 0 7.625-1.234 9.168-3v14c-1.543-1.766-5.067-3-9.168-3H7a3.988 3.988 0 01-1.564-.317z"
                                />
                            </svg>
                        </span>
                        <p class="ml-3 font-medium text-white truncate">请打开控制台查看</p>
                    </div>
                </div>
            </div>
        </div>

        <h1 class="text-4xl my-7 text-center text-red-500">DOM</h1>
        <main class="w-96 my-0 mx-auto p-10 border rounded-lg shadow-sm">
            <button class="btn1 shadow focus:ring" onclick="test1()">获取 class</button>
            <button class="btn2 shadow bg-red-400 text-gray-50 focus:ring" onclick="test3()">移除 class</button>
            <button class="btn3 shadow focus:ring" onclick="test4()">节点</button>

            <div class="card div1 select-none shadow cursor-pointer" onclick="test2()">修改属性 align</div>

            <div class="card nodes shadow-md cursor-pointer" onclick="test5()">
                点击卡片空白处获取 nodeList
                <button class="firstChild shadow mt-2 focus:ring" onclick="getFirstChild()"><span>🍧 </span>firstChild</button>
                <button class="lastChild shadow mt-2 focus:ring" onclick="getLastChild()"><span>🌍 </span>lastChild</button>
                <button class="ownerDocument shadow w-full focus:ring" onclick="getOwnerDocument()">ownerDocument</button>
                <button class="parentNode shadow focus:ring" onclick="getParentNode()">parentNode</button>
                <button class="previousSibling shadow focus:ring" onclick="getPreviousSibling()">previousSibling</button>
                <button class="nextSibling shadow focus:ring" onclick="getNextSibling()">nextSibling</button>
                <button class="attributes shadow focus:ring" onclick="getAttributes()">attributes</button>
            </div>

            <div class="card node-actions shadow-md">
                <h3 class="text-center mb-2 font-bold">节点操作</h3>
                <ul class="list list-disc ml-5 my-2">
                    <li>item-1</li>
                </ul>
                <button class="shadow w-full cursor-not-allowed focus:ring" onclick="write()" disabled>write</button>
                <button class="shadow w-full focus:ring" onclick="append()">在最后方插入一项</button>
                <button class="shadow w-full focus:ring" onclick="insertBf()">在最前方插入一项</button>
                <button class="shadow w-full focus:ring" onclick="replaceC()">替换第一项</button>
                <button class="shadow w-full focus:ring" onclick="cloneFirst()">clone 第一项并放到最后</button>
                <button class="shadow w-full focus:ring" onclick="removeFirst()">移除第一项</button>
            </div>

            <div class="card node-actions shadow-md">
                <h3 class="text-center mb-2 font-bold">DOM 编程</h3>
                <button class="shadow w-full focus:ring" onclick="(()=> {alert('onclick')})()">onclick - 单击</button>
                <button class="shadow w-full focus:ring" ondblclick="(()=> {alert('ondbclick')})()">ondblclick - 双击</button>
                <div
                    class="w-full h-40 bg-blue-200 rounded shadow"
                    onmousemove="(()=> {console.log('onmousemove')})()"
                    onmouseup="(()=> {console.log('onmouseup')})()"
                    onmousedown="(()=> {console.log('onmousedown')})()"
                    onmouseover="(()=> {console.log('onmouseover')})()"
                    onmouseout="(()=> {console.log('onmouseout')})()"
                ></div>
                <input type="text" class="pl-2 py-2 text-xs w-full my-4 border" onkeypress="keyPressEvent(event)" placeholder="监听回车" />
            </div>

            <div class="card node-actions shadow-md">
                <h3 class="text-center mb-2 font-bold">表单提交</h3>
                <form action="/" method="POST">
                    <input class="py-1 px-2 bg-gray-400 text-white" type="submit" value="type=submit 提交" />
                    <input class="py-1 px-2 bg-green-500 text-white" type="button" value="Button 提交" onclick="submit()" />
                </form>
            </div>

            <div class="card node-actions shadow-md">
                <h3 class="text-center mb-2 font-bold">H5</h3>
                <div class="mb-4">Email: <input class="border" type="email" /></div>
                <div class="mb-4">Tel: <input class="border" type="tel" /></div>
                <div class="mb-4">Number: <input class="border" type="number" /></div>
                <div class="mb-4">Date: <input class="border" type="date" /></div>
                <div class="mb-4">Time: <input class="border" type="time" /></div>
                <div class="mb-4">DateTime: <input class="border" type="datetime" /></div>
                <div class="mb-4">Color: <input class="border" type="color" onchange="handleColorChange(event)" /></div>
            </div>
        </main>

        <script>
            const random = max => Math.floor(Math.random() * 99);

            const test1 = () => {
                const $btn = document.querySelector('.btn1');
                console.log('通过 getAttribute：', $btn.getAttribute('class'));
                console.log('通过 “.” :', $btn.className);
            };

            const test2 = () => {
                const $div = document.querySelector('.div1');
                $div.align === 'right' ? ($div.align = 'left') : ($div.align = 'right');
                $div.setAttribute('title', 'title is changed.');
            };

            const test3 = () => {
                const $btn = document.querySelector('.btn2');
                $btn.removeAttribute('class');
            };

            const test4 = () => {
                const $btn = document.querySelector('.btn3');
                const { nodeName, nodeType, nodeValue } = $btn;
                console.log('nodeName：', nodeName);
                console.log('nodeType：', nodeType);
                console.log('nodeValue：', nodeValue);
            };

            const test5 = () => {
                const ele = document.querySelector('.nodes');
                // const nodeList = ele.childNodes

                // console.log(nodeList)

                // for (let i = 0; i < nodeList.length; i++) {
                //     const element = nodeList[i];
                //     console.log(element)
                // }

                // nodeList.forEach(element => {
                //     console.log(element)
                // });
            };

            const getFirstChild = () => {
                const ele = document.querySelector('.firstChild');
                console.log(ele.firstChild);
            };

            const getLastChild = () => {
                const ele = document.querySelector('.lastChild');
                console.log(ele.lastChild);
            };

            const getOwnerDocument = () => {
                const ele = document.querySelector('.ownerDocument');
                console.log(ele.ownerDocument);
            };

            const getParentNode = () => {
                const ele = document.querySelector('.parentNode');
                console.log(ele.parentNode);
            };

            const getPreviousSibling = () => {
                const ele = document.querySelector('.previousSibling');
                console.log(ele.previousSibling);
            };

            const getNextSibling = () => {
                const ele = document.querySelector('.nextSibling');
                console.log(ele.nextSibling);
            };

            const getAttributes = () => {
                const ele = document.querySelector('.attributes');
                console.log(ele.attributes);
            };

            const write = () => {
                // document.write("DOM")
            };

            const append = () => {
                const num = random(99);
                const li = document.createElement('li');
                const content = document.createTextNode(`item-append-${num}`);
                li.appendChild(content);
                const list = document.querySelector('.list');
                list.appendChild(li);
            };

            const insertBf = () => {
                const num = random(99);
                const li = document.createElement('li');
                const content = document.createTextNode(`item-before-${num}`);
                li.appendChild(content);

                const list = document.querySelector('.list');
                const firstLi = list.firstChild;

                list.insertBefore(li, firstLi);
            };

            const replaceC = () => {
                const li = document.createElement('li');
                const content = document.createTextNode('item-new-replace！');
                li.appendChild(content);

                const list = document.querySelector('.list');

                let firstLi = list.firstChild;
                if (firstLi.nodeType === 3) {
                    firstLi = firstLi.nextSibling;
                }

                list.replaceChild(li, firstLi);
            };

            const cloneFirst = () => {
                const list = document.querySelector('.list');

                let firstLi = list.firstChild;
                if (firstLi.nodeType === 3) {
                    firstLi = firstLi.nextSibling;
                }

                // 采用深度克隆
                const newNode = firstLi.cloneNode(true);
                list.appendChild(newNode);
            };

            const removeFirst = () => {
                const list = document.querySelector('.list');

                let firstLi = list.firstChild;
                if (firstLi.nodeType === 3) {
                    firstLi = firstLi.nextSibling;
                }
                list.removeChild(firstLi);
            };

            const keyPressEvent = e => {
                if (e.keyCode === 13) {
                    alert('您按下了回车');
                }
            };

            const submit = () => {
                const $form = document.querySelector('form');
                // $form.action = './'
                $form.submit();
            };
        </script>

        <script>
            const handleColorChange = e => {
                const color = e.target.value
                const card = e.target.parentNode.parentNode
                card.style.background = color
            }
        </script>
    </body>
</html>
